<template><div><h2 id="表格基本使用" tabindex="-1"><a class="header-anchor" href="#表格基本使用"><span>表格基本使用</span></a></h2>
<h2 id="简单示例" tabindex="-1"><a class="header-anchor" href="#简单示例"><span>简单示例</span></a></h2>
<p><code v-pre>Dcat\Admin\Grid</code>类用于生成基于数据模型的表格，先来个例子，数据库中有<code v-pre>movies</code>表</p>
<div class="language-sql line-numbers-mode" data-highlighter="prismjs" data-ext="sql" data-title="sql"><pre v-pre class="language-sql"><code><span class="line"><span class="token keyword">CREATE</span> <span class="token keyword">TABLE</span> <span class="token identifier"><span class="token punctuation">`</span>movies<span class="token punctuation">`</span></span> <span class="token punctuation">(</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">AUTO_INCREMENT</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>title<span class="token punctuation">`</span></span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">)</span> <span class="token keyword">COLLATE</span> utf8_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>director<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>describe<span class="token punctuation">`</span></span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">)</span> <span class="token keyword">COLLATE</span> utf8_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>rate<span class="token punctuation">`</span></span> <span class="token keyword">tinyint</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>released<span class="token punctuation">`</span></span> <span class="token keyword">enum</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>release_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>created_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>updated_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token keyword">PRIMARY</span> <span class="token keyword">KEY</span> <span class="token punctuation">(</span><span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">)</span> <span class="token keyword">ENGINE</span><span class="token operator">=</span><span class="token keyword">InnoDB</span> <span class="token keyword">DEFAULT</span> <span class="token keyword">CHARSET</span><span class="token operator">=</span>utf8 <span class="token keyword">COLLATE</span><span class="token operator">=</span>utf8_unicode_ci<span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>对应的数据模型为<code v-pre>App\Models\Movie</code>，对应的数据仓库为<code v-pre>App\Admin\Repositories\Movie</code>，数据仓库代码如下：</p>
<blockquote>
<p>{tip} 如果你的数据来自<code v-pre>MySQL</code>，则<code v-pre>数据仓库</code>不是必须的，你也可以直接使用<code v-pre>Model</code>。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Repositories</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Repositories<span class="token punctuation">\</span>EloquentRepository</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Movie</span> <span class="token keyword">as</span> MovieModel<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Movie</span> <span class="token keyword">extends</span> <span class="token class-name">EloquentRepository</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$eloquentClass</span> <span class="token operator">=</span> <span class="token class-name static-context">MovieModel</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 设置表格查询的字段，默认查询所有字段</span>
<span class="line">     * </span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">getGridColumns</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'director'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'rate'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>下面的代码可以生成表<code v-pre>movies</code>的数据表格：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Controllers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Repositories<span class="token punctuation">\</span>Movie</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package"><span class="token punctuation">\</span>Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>AdminController</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">MovieController</span> <span class="token keyword">extends</span> <span class="token class-name">AdminController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Movie</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 第一列显示id字段，并将这一列设置为可排序列</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'ID'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 第二列显示title字段，由于title字段名和Grid对象的title方法冲突，所以用Grid的column()方法代替</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 第三列显示director字段，通过display($callback)方法设置这一列的显示内容为users表中对应的用户名</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'director'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token variable">$userId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">return</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$userId</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token property">name</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 第四列显示为describe字段</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'describe'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 第五列显示为rate字段</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'rate'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 第六列显示released字段，通过display($callback)方法来格式化显示输出</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'released'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'上映?'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$released</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">return</span> <span class="token variable">$released</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'是'</span> <span class="token punctuation">:</span> <span class="token string single-quoted-string">'否'</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 下面为三个时间字段的列显示</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'release_at'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'created_at'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'updated_at'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// filter($callback)方法用来设置表格的简单搜索框</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$filter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token comment">// 设置created_at字段的范围查询</span></span>
<span class="line">                <span class="token variable">$filter</span><span class="token operator">-></span><span class="token function">between</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'created_at'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Created Time'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">datetime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表格显示模式" tabindex="-1"><a class="header-anchor" href="#表格显示模式"><span>表格显示模式</span></a></h2>
<h3 id="table-collapse" tabindex="-1"><a class="header-anchor" href="#table-collapse"><span>table_collapse</span></a></h3>
<p>在这个版本开始，默认的表格布局将会采用 <code v-pre>table_collapse</code> 模式，效果如下</p>
<p><a href="..%5Cassets%5Cimages%5C96703dcc-9c4b-4b51-9df4-74ae4ae8d9da-4bCfBdtvq5.png"><img src="@source/dcat-admin-2x/assets/images/96703dcc-9c4b-4b51-9df4-74ae4ae8d9da-4bCfBdtvq5.png" alt="4bCfBdtvq5.png!large"></a><a href="..%5Cassets%5Cimages%5Cc2f9af30-780c-449e-9c6a-2efab7a7957b-35KJXfVXib.png"><img src="@source/dcat-admin-2x/assets/images/c2f9af30-780c-449e-9c6a-2efab7a7957b-35KJXfVXib.png" alt="35KJXfVXib.png!large"></a></p>
<p>如果想要切换回旧版本的表格布局样式，可以在 <code v-pre>app/Admin/bootstrap.php</code>中加上</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">resolving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">tableCollapse</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="边框模式" tabindex="-1"><a class="header-anchor" href="#边框模式"><span>边框模式</span></a></h3>
<p>通过<code v-pre>withBorder</code>方式可以让表格显示边框</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">withBorder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/f7b34e95-0bde-4456-9ddf-cc0fb588c4e4-lKTZe0jwGg.png" alt=""></p>
<p>禁用边框模式</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">withBorder</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="基本使用方法" tabindex="-1"><a class="header-anchor" href="#基本使用方法"><span>基本使用方法</span></a></h2>
<h3 id="添加列-column" tabindex="-1"><a class="header-anchor" href="#添加列-column"><span>添加列 (column)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 添加单列</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'username'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'用户名'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 添加多列</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">columns</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'username'</span> <span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="修改查询条件-where" tabindex="-1"><a class="header-anchor" href="#修改查询条件-where"><span>修改查询条件 (where)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'>'</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 回收站数据</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">onlyTrashed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">...</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>同时也可以使用以下方式</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token class-name static-context">Model</span><span class="token operator">::</span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token operator">...</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其它查询方法可以参考<code v-pre>eloquent</code>的查询方法.</p>
<h4 id="设置默认排序" tabindex="-1"><a class="header-anchor" href="#设置默认排序"><span>设置默认排序</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>这个功能也支持关联关系表字段排序，注意这里仅支持<code v-pre>一对一</code>以及<code v-pre>一对多</code>关联关系</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'profile.age'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="修改显示输出-display" tabindex="-1"><a class="header-anchor" href="#修改显示输出-display"><span>修改显示输出 (display)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'text'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token variable">$text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">str_limit</span><span class="token punctuation">(</span><span class="token variable">$text</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 允许混合使用多个“display”方法</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">     <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;b><span class="token interpolation"><span class="token variable">$name</span></span>&lt;/b>"</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;span class='label'><span class="token interpolation"><span class="token variable">$name</span></span>&lt;/span>"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$email</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"mailto:<span class="token interpolation"><span class="token variable">$email</span></span>"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 可以直接写字符串</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'username'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 添加不存在的字段</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column_not_in_table'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string single-quoted-string">'blablabla....'</span><span class="token operator">.</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">id</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="显示序号-number" tabindex="-1"><a class="header-anchor" href="#显示序号-number"><span>显示序号 (number)</span></a></h3>
<p>通过<code v-pre>number</code>方法可以在表格中添加一列从<code v-pre>1</code>开始计算的行序号列</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">number</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置名称-setname" tabindex="-1"><a class="header-anchor" href="#设置名称-setname"><span>设置名称 (setName)</span></a></h3>
<p>当页面存在多个<code v-pre>Grid</code>表格时，需要给表格设置不同的名称，否则部分功能可能会出现冲突的情况</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">setName</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="获取当前行数据-row" tabindex="-1"><a class="header-anchor" href="#获取当前行数据-row"><span>获取当前行数据 (row)</span></a></h3>
<p><code v-pre>display()</code>方法接收的匿名函数绑定了当前行的数据对象，可以在里面调用当前行的其它字段数据</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'first_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'last_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 不存的字段列</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'full_name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">first_name</span><span class="token operator">.</span><span class="token string single-quoted-string">' '</span><span class="token operator">.</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token property">last_name</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置工具栏按钮样式" tabindex="-1"><a class="header-anchor" href="#设置工具栏按钮样式"><span>设置工具栏按钮样式</span></a></h3>
<p>工具栏按钮默认显示<code v-pre>outline</code>模式，效果如下</p>
<p>用法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">toolsWithOutline</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁止</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">toolsWithOutline</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/99d5a7f3-7a1f-4e09-b119-97abe0354961-hKWC1crYHw.png" alt=""></p>
<p>禁用<code v-pre>outline</code>后的效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/38a75b68-fe28-4803-88ec-97c17e2aef06-aaMdymSxoY.png" alt=""></p>
<p>如果你希望某个按钮不使用<code v-pre>outline</code>模式，可以在按钮的<code v-pre>class</code>属性中加上<code v-pre>disable-outline</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">tools</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'&lt;a class="btn btn-primary disable-outline">测试按钮&lt;/a>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置创建按钮-createbutton" tabindex="-1"><a class="header-anchor" href="#设置创建按钮-createbutton"><span>设置创建按钮 (createButton)</span></a></h3>
<p>此功能默认开启</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableCreateButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showCreateButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="开启弹窗创建表单" tabindex="-1"><a class="header-anchor" href="#开启弹窗创建表单"><span>开启弹窗创建表单</span></a></h4>
<p>此功能默认不开启</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">enableDialogCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置弹窗宽高，默认值为 '700px', '670px'</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">setDialogFormDimensions</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'50%'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'50%'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="传递参数到按钮的url" tabindex="-1"><a class="header-anchor" href="#传递参数到按钮的url"><span>传递参数到按钮的URL</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">setConstraints</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'key1'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'v1'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'key2'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'v2'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="修改创建以及更新按钮的路由-setresource" tabindex="-1"><a class="header-anchor" href="#修改创建以及更新按钮的路由-setresource"><span>修改创建以及更新按钮的路由 (setResource)</span></a></h3>
<p>设置修改创建以及更新按钮的路由前缀</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">setResource</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置查询过滤器-filter" tabindex="-1"><a class="header-anchor" href="#设置查询过滤器-filter"><span>设置查询过滤器 (filter)</span></a></h3>
<p>此功能默认开启</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableFilter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showFilter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用过滤器按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableFilterButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示过滤器按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showFilterButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="行选择器-rowselector" tabindex="-1"><a class="header-anchor" href="#行选择器-rowselector"><span>行选择器 (rowSelector)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableRowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showRowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置选择中行的标题字段" tabindex="-1"><a class="header-anchor" href="#设置选择中行的标题字段"><span>设置选择中行的标题字段</span></a></h4>
<p>设置选中后需要显示的字段，如不设置，默认取 <code v-pre>name</code>、 <code v-pre>title</code>、 <code v-pre>username</code>中的一个。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'full_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">...</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">rowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">titleColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'full_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置选择中行的id字段" tabindex="-1"><a class="header-anchor" href="#设置选择中行的id字段"><span>设置选择中行的ID字段</span></a></h4>
<p>设置选中后需要保存的字段，默认为 数据表主键(id) 字段</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'new_id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">...</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">rowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">idColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'new_id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置checkbox选择框颜色" tabindex="-1"><a class="header-anchor" href="#设置checkbox选择框颜色"><span>设置checkbox选择框颜色</span></a></h4>
<p>默认 <code v-pre>primary</code>，支持：<code v-pre>default</code>、 <code v-pre>primary</code>、 <code v-pre>success</code>、 <code v-pre>info</code>、 <code v-pre>danger</code>、 <code v-pre>purple</code>、 <code v-pre>inverse</code>。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">rowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">style</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="点击当前行任意位置选中" tabindex="-1"><a class="header-anchor" href="#点击当前行任意位置选中"><span>点击当前行任意位置选中</span></a></h4>
<p>此功能默认不开启。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">rowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="设置选中行的背景颜色" tabindex="-1"><a class="header-anchor" href="#设置选中行的背景颜色"><span>设置选中行的背景颜色</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">rowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">background</span><span class="token punctuation">(</span><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">color</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">dark20</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置默认选中行" tabindex="-1"><a class="header-anchor" href="#设置默认选中行"><span>设置默认选中行</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">rowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$row</span><span class="token operator">-></span><span class="token property">state</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">// 默认选中state为1的行</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置禁止选中行-disable" tabindex="-1"><a class="header-anchor" href="#设置禁止选中行-disable"><span>设置禁止选中行 (disable)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">rowSelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disable</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$row</span><span class="token operator">-></span><span class="token property">state</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// state为0的行不可选中</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置行操作按钮-actions" tabindex="-1"><a class="header-anchor" href="#设置行操作按钮-actions"><span>设置行操作按钮 (actions)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableActions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showActions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用详情按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableViewButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示详情按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showViewButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用编辑按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableEditButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示编辑按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showEditButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用快捷编辑按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableQuickEditButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示快捷编辑按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showQuickEditButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置弹窗宽高，默认值为 '700px', '670px'</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">setDialogFormDimensions</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'50%'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'50%'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用删除按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableDeleteButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示删除按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showDeleteButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置批量操作按钮-batchactions" tabindex="-1"><a class="header-anchor" href="#设置批量操作按钮-batchactions"><span>设置批量操作按钮 (batchActions)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableBatchActions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showBatchActions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用批量删除按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableBatchDelete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示批量删除按钮</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showBatchDelete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="批量操作设置下拉菜单分割线-divider" tabindex="-1"><a class="header-anchor" href="#批量操作设置下拉菜单分割线-divider"><span>批量操作设置下拉菜单分割线 (divider )</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 方式1</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">batchActions</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$batch</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$batch</span><span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 显示分割线</span></span>
<span class="line">    <span class="token variable">$batch</span><span class="token operator">-></span><span class="token function">divider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 方式2</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid<span class="token punctuation">\</span>Tools<span class="token punctuation">\</span>ActionDivider</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">batchActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token keyword">new</span> <span class="token class-name">Action1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line">    <span class="token keyword">new</span> <span class="token class-name">ActionDivider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置工具栏-toolbar" tabindex="-1"><a class="header-anchor" href="#设置工具栏-toolbar"><span>设置工具栏 (toolbar)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableToolbar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showToolbar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置刷新按钮-refresh" tabindex="-1"><a class="header-anchor" href="#设置刷新按钮-refresh"><span>设置刷新按钮 (refresh)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableRefreshButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showRefreshButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置分页功能-paginate" tabindex="-1"><a class="header-anchor" href="#设置分页功能-paginate"><span>设置分页功能 (paginate)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disablePagination</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 显示</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">showPagination</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="简化分页-simplepaginate" tabindex="-1"><a class="header-anchor" href="#简化分页-simplepaginate"><span>简化分页 (simplePaginate)</span></a></h4>
<p>启用 <code v-pre>simplePaginate</code> 功能后会使用<code v-pre>Laravel</code>的<a href="https://learnku.com/docs/laravel/8.x/pagination#simple-pagination" target="_blank" rel="noopener noreferrer">simplePaginate</a>功能进行分页，当数据量较大时可以大幅提升页面的响应速度，但需要注意的是，使用此功能后将不会查询数据表的<strong>总行数</strong>。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 启用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">simplePaginate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">simplePaginate</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置每页显示行数" tabindex="-1"><a class="header-anchor" href="#设置每页显示行数"><span>设置每页显示行数</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 默认为每页20条</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">paginate</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置分页选择器选项-perpages" tabindex="-1"><a class="header-anchor" href="#设置分页选择器选项-perpages"><span>设置分页选择器选项 (perPages)</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">perPages</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用分页选择器</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disablePerPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置表格样式-addtableclass" tabindex="-1"><a class="header-anchor" href="#设置表格样式-addtableclass"><span>设置表格样式 (addTableClass)</span></a></h3>
<p>通过<code v-pre>addTableClass</code>可以给表格的<code v-pre>table</code>添加<code v-pre>css</code>样式</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">addTableClass</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'class1'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'class2'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置表格文字居中-table-text-center" tabindex="-1"><a class="header-anchor" href="#设置表格文字居中-table-text-center"><span>设置表格文字居中 (table-text-center)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">addTableClass</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'table-text-center'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="显示横向滚动条-scrollbarx" tabindex="-1"><a class="header-anchor" href="#显示横向滚动条-scrollbarx"><span>显示横向滚动条 (scrollbarX)</span></a></h3>
<p>显示表格横向滚动条，默认不显示</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 启用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">scrollbarX</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">scrollbarX</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置表格外层容器" tabindex="-1"><a class="header-anchor" href="#设置表格外层容器"><span>设置表格外层容器</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"> <span class="token comment">// 更改表格外层容器</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">wrap</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Renderable</span> <span class="token variable">$view</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$tab</span> <span class="token operator">=</span> <span class="token class-name static-context">Tab</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$tab</span><span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'示例'</span><span class="token punctuation">,</span> <span class="token variable">$view</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$tab</span><span class="token operator">-></span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'代码'</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">code</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$tab</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="关联模型" tabindex="-1"><a class="header-anchor" href="#关联模型"><span>关联模型</span></a></h2>
<p>参考<a href="https://learnku.com/docs/dcat-admin/2.x/association/8821" target="_blank" rel="noopener noreferrer">表格关联关系</a></p>
</div></template>


